<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-24 12:27:42
-->
<template>
  <h4>布尔型属性绑定</h4>
  <hr />
  <h4>示例代码：</h4>
  <h4>&#123;{ ok ? 'YES' : 'NO' }&#125;</h4>
  <h4>ok is: {{ ok }}, &#123;{ ok ? 'YES' : 'NO' }&#125; result is: {{ ok ? 'YES' : 'NO' }}</h4>
  <h4><button @click="toggleOk">toggle ok</button></h4>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'

const ok = ref(true);
const toggleOk = () => {
  ok.value = !ok.value;
}
</script>

<style scoped>
#blue {
  color: blue;
}

#red {
  color: red;
}

#green {
  color: green;
}

.bold {
  font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
#numInput[type="number"]::-webkit-outer-spin-button,
#numInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style>
